<template>
  <div>
    <a-modal :visible="visbleModal" 
      :width="640"
      :closable="true"
      title="指标配置"
      :maskClosable="false"
      @ok="saveZbConfigEvent"
      @cancel="cancalModal"> 
        <div style="padding-left: 20px;padding-top: 20px; padding-bottom: 20px;">
          <div class="flex" style="flex-direction: row; justify-content:space-between;">
            <span class="flex" style="width:125px;">指标</span>
            <span class="flex" style="width:125px;">条件</span>
            <span class="flex" style="width:125px;">对比指标</span>
            <span class="flex" style="width:125px;">权重百分比</span>
            <span class="flex" style="width:60px">&nbsp;</span>
          </div>
          <a-list :data-source="zbConfigList">
            <template #renderItem="{ item, index }">
              <a-list-item>

                <a-select style="width:125px;" placeholder="请选择" :value="item.sourceZbCode"
                  @change="(value)=> {
                  item.sourceZbCode = value;
                  item.sourceZbName = zbList.find(m=>m.value==value)?.label;
                }">
                  <a-select-option :value="zb.value" v-for="zb in zbList" :key="zb.value">
                    {{ zb.label }}
                  </a-select-option>
                </a-select>

                <a-select style="width:125px;" placeholder="请选择" :value="item.condition"
                  @change="(value)=>{item.condition = value;}">
                  <a-select-option value="gt" key="gt">大于</a-select-option>
                  <a-select-option value="lt" key="lt">小于</a-select-option>
                  <a-select-option value="eq" key="eq">等于</a-select-option>
                </a-select>

                <a-select style="width:125px;" 
                  @change="(value)=>{
                    if(value=='userdefine') {
                      item.targetInputType = 'input';
                      item.targetZbCode = '';
                      item.targetZbName = '';
                    } else {
                      item.targetZbCode = value;
                      item.targetZbName = zbList.find(m=>m.value==value)?.label;
                    }
                  }" 
                  v-if="item.targetInputType=='select'"
                  :value="item.targetZbCode"
                  placeholder="请选择"
                  >
                  <a-select-option value="userdefine" style="color: #2550ff;"><EditOutlined/>&nbsp;自定义</a-select-option>
                  <a-select-option :value="zb.value" v-for="zb in getCompareList(item.sourceZbCode)" :key="zb.value">
                    {{ zb.label }}
                  </a-select-option>
                </a-select>
                
                <a-input v-if="item.targetInputType=='input'" placeholder="请输入自定义参数" style="width:125px;" 
                :value="item.targetValue"
                @change="(e)=>{
                  item.targetValue = e.target.value;
                }">
                  <template #suffix>
                      <SwapOutlined style="color: rgba(0, 0, 0, 0.45);cursor: pointer;" @click="{item.targetInputType='select';}"
                        title="点击切换选择指标"/>
                  </template>
                </a-input>

                <a-input placeholder="请输入权重百分比" style="width:125px;" v-model:value="item.weight" @blur="()=>{
                  if(!(/\d+/.test(item.weight))) {
                    message.error('请输入整数');
                  }
                }">
                  <template #suffix>
                    %
                  </template>
                </a-input>
                
                <span style="display: inline-block; width:60px;">
                  <MinusCircleOutlined v-if="zbConfigList.length>1" style="cursor: pointer; color: #ff4d4f;" title="删除该配置" @click="{
                    zbConfigList.splice(index,1);
                  }"/>
                  <PlusCircleOutlined title="添加配置" @click="appendNewConfig"
                    v-if="index==zbConfigList.length-1" style="margin-left: 8px;cursor: pointer;"/>
                </span>
              </a-list-item>
            </template>
          </a-list>
        </div>
      </a-modal>
  </div>
</template>

<script lang="ts">
  import { Popconfirm, Input, Button, Modal, List, ListItem, Select, SelectOption } from 'ant-design-vue';
  export default {
    components: {
      AButton: Button,
      AInput: Input,
      Popconfirm: Popconfirm,
      AModal: Modal,
      AList: List,
      AListItem: ListItem,
      ASelect: Select,
      ASelectOption: SelectOption
    },
  };
</script>

<script lang="ts" setup>

import { ref,onMounted, onUnmounted, computed } from 'vue';
import { getZhibiaoOfColumnIndexList } from '/@/api/dp/column/dpColumn';
import { saveUserPageZbConfig, getUserPageByPageName } from '/@/api/stock/userStocksDao';
import { getCurrentUserId } from '../../utils/currentUser.ts';
import { EditOutlined, MinusCircleOutlined, PlusCircleOutlined, PlusSquareOutlined,SwapOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

const visbleModal = ref(false);

const zbList = ref([]);
const currentPageName = ref('');
const userPageInfo = ref({});

function getCompareList(sourceZbCode) {
  let zb = zbList.value.find(m=>m.value==sourceZbCode);
  if(zb) {
    return zb.compareList;
  }
  return [];
}

let defaultZbConfig = {
  "sourceZbCode": null,
    "sourceZbName": null,
    "condition": null,
    "targetZbCode": null,
    "targetZbName": null,
    "targetValue":null,
    "weight": 0,
    "targetInputType":'select'
}
const zbConfigList = ref([
  {
    ...defaultZbConfig
  }
]);

defineExpose({showModal, cancalModal});

function appendNewConfig() {
  zbConfigList.value.push({...defaultZbConfig});
};

function loadUsePageInfo() {
  getUserPageByPageName({
    "userId": getCurrentUserId(),
    "pageName": currentPageName.value
  }).then(data=> {
    if(data) {
      userPageInfo.value = data;
      zbConfigList.value = [{...defaultZbConfig}];
      if(data.zbconfigs) {
        zbConfigList.value = JSON.parse(data.zbconfigs);
      }
    }
  });
}

function configValidate() {

  for(var i=0; i<zbConfigList.value.length; i++) {
    var item = zbConfigList.value[i];
    if(!item.sourceZbCode) {
      message.error('配置有误[第'+(i+1)+'行]：请选择指标');
      return false;
    }
    if(item.targetInputType=='select' && !item.targetZbCode) {
      message.error('配置有误[第'+(i+1)+'行]：请选择对比指标');
      return false;
    } 
    if(item.targetInputType=='input' && !item.targetValue) {
      message.error('配置有误[第'+(i+1)+'行]：请输入对比值');
      return false;
    }
    if(!(/\d+/.test(item.weight+''))) {
      message.error('配置有误[第'+(i+1)+'行]：权重百分比有误,请输入数字');
      return false;
    }
  }

  let weightTotal = 0;
  zbConfigList.value.forEach(item=> {
    weightTotal+= (item.weight?parseInt(item.weight):0)
  });
  if(weightTotal!=100) {
    message.error('配置有误：权重和必须等于100%')
    return false;
  }
  return true
}
async function saveZbConfigEvent() {
  if(configValidate()) {
    await saveUserPageZbConfig({}, {
      "userId": getCurrentUserId(),
      "pageName": currentPageName.value,
      "configs": JSON.stringify(zbConfigList.value)
    });
    message.success('保存成功');
    visbleModal.value = false;
  }
}

function showModal(pageName) {
  currentPageName.value = pageName;
  loadZbList();
  loadUsePageInfo();
  visbleModal.value = true;
}

function cancalModal() {
  visbleModal.value = false;
  console.log(zbConfigList.value);
}

/**
 * 获取所有指标项
 */
function loadZbList() {
  getZhibiaoOfColumnIndexList().then((list)=>{
    zbList.value = list;
  });
}

onMounted(()=>{
  
});

</script>

<style scoped>

</style>